<script setup>
import { ref } from 'vue';
import { View, Text, Image, ScrollView } from '@tarojs/components';
import { IconFont } from '@nutui/icons-vue-taro';

// 用户信息
const userInfo = ref({
  name: '张明',
  healthId: 'HA20231015001',
  anfinelId: 'AFID20231015001'
});

// 人口学信息
const demographicInfo = ref({
  gender: '男性',
  age: '45岁 (1978年3月15日)',
  ethnicity: '汉族',
  nationality: '中国',
  maritalStatus: '已婚',
  education: '本科',
  occupation: '软件工程师',
  company: '某科技股份有限公司',
  religion: '无'
});

// 生物特征
const biometrics = ref({
  bloodType: 'A+',
  height: '175 cm',
  weight: '70 kg',
  bmi: '22.9'
});

// 按钮加载状态
const editLoading = ref(false);
const printLoading = ref(false);

// 返回上一页
const handleBack = () => {
  console.log('返回上一页');
};

// 编辑信息
const handleEdit = () => {
  editLoading.value = true;
  setTimeout(() => {
    editLoading.value = false;
    console.log('进入编辑模式');
  }, 800);
};

// 打印报告
const handlePrint = () => {
  printLoading.value = true;
  setTimeout(() => {
    printLoading.value = false;
    console.log('打印报告');
  }, 800);
};
</script>

<template>
  <View class="flex flex-col min-h-[100vh] bg-gradient-to-b from-[#f0f7ff] to-[#e6f0ff] p-[20rpx_0]">
    <!-- 主容器 -->
    <View class="w-[750rpx] bg-white rounded-[25rpx] shadow-[0_15rpx_50rpx_rgba(0,80,180,0.15)] overflow-hidden mx-auto relative">
      <!-- 头部区域 -->
      <View class="bg-gradient-to-r from-[#1a73e8] to-[#0d47a1] text-white p-[30rpx_40rpx] relative text-center">
        <View class="flex justify-between items-center mb-[20rpx]">
          <Button 
            class="bg-[rgba(255,255,255,0.2)] border-none rounded-full w-[45rpx] h-[45rpx] text-white text-[20rpx] transition-all duration-300 flex items-center justify-center hover:bg-[rgba(255,255,255,0.3)] hover:scale-105" 
            @click="handleBack"
          >
            <IconFont name="arrow-left" />
          </Button>
          <Text class="text-[34rpx] font-semibold tracking-[1rpx] text-shadow-[0_2rpx_4rpx_rgba(0,0,0,0.2)]">人口学信息详情</Text>
          <View></View>
        </View>
        
        <Text class="text-[18rpx] opacity-90 max-w-[600rpx] mx-auto leading-[1.6] block">个人人口学特征和生物特征详细信息</Text>
        
        <!-- 用户信息 -->
        <View class="flex items-center justify-center mt-[15rpx]">
          <View class="w-[80rpx] h-[80rpx] rounded-full bg-gradient-to-br from-[#64b5f6] to-[#1a73e8] flex items-center justify-center text-white text-[36rpx] border-[3rpx] border-white shadow-[0_5rpx_15rpx_rgba(0,0,0,0.2)] mr-[20rpx]">
            <IconFont name="user" />
          </View>
          <View class="text-left">
            <Text class="text-[26rpx] font-bold block">{{ userInfo.name }}</Text>
            <Text class="opacity-90 text-[16rpx] block">健康档案号: {{ userInfo.healthId }} | AnfinelID: {{ userInfo.anfinelId }}</Text>
          </View>
        </View>
      </View>
      
      <!-- 内容区域 -->
      <ScrollView scroll-y class="p-[40rpx]">
        <!-- 人口学信息部分 -->
        <View class="mb-[40rpx]">
          <View class="flex items-center mb-[25rpx] pb-[15rpx] border-b-[2rpx] border-b-[#e0e0e0]">
            <View class="w-[50rpx] h-[50rpx] bg-gradient-to-br from-[#64b5f6] to-[#1a73e8] rounded-[12rpx] flex items-center justify-center text-white text-[24rpx] shadow-[0_4rpx_12rpx_rgba(26,115,232,0.3)] mr-[15rpx]">
              <IconFont name="users" />
            </View>
            <Text class="text-[26rpx] font-semibold text-[#1a73e8]">人口学信息</Text>
          </View>
          
          <View class="grid grid-cols-2 gap-[30rpx]">
            <!-- 性别卡片 -->
            <View class="bg-[#f8fbff] rounded-[15rpx] p-[25rpx] border-[1rpx] border-[#e0e0e0] transition-all duration-300 shadow-[0_5rpx_15rpx_rgba(0,0,0,0.05)] hover:translate-y-[-5rpx] hover:shadow-[0_8rpx_20rpx_rgba(26,115,232,0.15)]">
              <View class="flex items-center mb-[20rpx]">
                <View class="w-[40rpx] h-[40rpx] bg-[#1a73e8] rounded-[10rpx] flex items-center justify-center text-white text-[18rpx] mr-[15rpx]">
                  <IconFont name="venus-mars" />
                </View>
                <Text class="text-[20rpx] font-semibold text-[#333]">性别</Text>
              </View>
              <View class="text-[18rpx] text-[#555] leading-[1.6] pl-[55rpx]">
                <Text class="block my-[12rpx] flex items-center">
                  <IconFont name="check" class="mr-[10rpx] text-[#1a73e8] w-[24rpx] text-center" /> 
                  {{ demographicInfo.gender }}
                </Text>
              </View>
            </View>
            
            <!-- 年龄/出生日期卡片 -->
            <View class="bg-[#f8fbff] rounded-[15rpx] p-[25rpx] border-[1rpx] border-[#e0e0e0] transition-all duration-300 shadow-[0_5rpx_15rpx_rgba(0,0,0,0.05)] hover:translate-y-[-5rpx] hover:shadow-[0_8rpx_20rpx_rgba(26,115,232,0.15)]">
              <View class="flex items-center mb-[20rpx]">
                <View class="w-[40rpx] h-[40rpx] bg-[#1a73e8] rounded-[10rpx] flex items-center justify-center text-white text-[18rpx] mr-[15rpx]">
                  <IconFont name="birthday-cake" />
                </View>
                <Text class="text-[20rpx] font-semibold text-[#333]">年龄/出生日期</Text>
              </View>
              <View class="text-[18rpx] text-[#555] leading-[1.6] pl-[55rpx]">
                <Text class="block my-[12rpx] flex items-center">
                  <IconFont name="calendar" class="mr-[10rpx] text-[#1a73e8] w-[24rpx] text-center" /> 
                  {{ demographicInfo.age }}
                </Text>
              </View>
            </View>
            
            <!-- 民族卡片 -->
            <View class="bg-[#f8fbff] rounded-[15rpx] p-[25rpx] border-[1rpx] border-[#e0e0e0] transition-all duration-300 shadow-[0_5rpx_15rpx_rgba(0,0,0,0.05)] hover:translate-y-[-5rpx] hover:shadow-[0_8rpx_20rpx_rgba(26,115,232,0.15)]">
              <View class="flex items-center mb-[20rpx]">
                <View class="w-[40rpx] h-[40rpx] bg-[#1a73e8] rounded-[10rpx] flex items-center justify-center text-white text-[18rpx] mr-[15rpx]">
                  <IconFont name="flag" />
                </View>
                <Text class="text-[20rpx] font-semibold text-[#333]">民族</Text>
              </View>
              <View class="text-[18rpx] text-[#555] leading-[1.6] pl-[55rpx]">
                <Text class="block my-[12rpx] flex items-center">
                  <IconFont name="user-tag" class="mr-[10rpx] text-[#1a73e8] w-[24rpx] text-center" /> 
                  {{ demographicInfo.ethnicity }}
                </Text>
              </View>
            </View>
            
            <!-- 国籍卡片 -->
            <View class="bg-[#f8fbff] rounded-[15rpx] p-[25rpx] border-[1rpx] border-[#e0e0e0] transition-all duration-300 shadow-[0_5rpx_15rpx_rgba(0,0,0,0.05)] hover:translate-y-[-5rpx] hover:shadow-[0_8rpx_20rpx_rgba(26,115,232,0.15)]">
              <View class="flex items-center mb-[20rpx]">
                <View class="w-[40rpx] h-[40rpx] bg-[#1a73e8] rounded-[10rpx] flex items-center justify-center text-white text-[18rpx] mr-[15rpx]">
                  <IconFont name="globe" />
                </View>
                <Text class="text-[20rpx] font-semibold text-[#333]">国籍</Text>
              </View>
              <View class="text-[18rpx] text-[#555] leading-[1.6] pl-[55rpx]">
                <Text class="block my-[12rpx] flex items-center">
                  <IconFont name="passport" class="mr-[10rpx] text-[#1a73e8] w-[24rpx] text-center" /> 
                  {{ demographicInfo.nationality }}
                </Text>
              </View>
            </View>
            
            <!-- 婚姻状况卡片 -->
            <View class="bg-[#f8fbff] rounded-[15rpx] p-[25rpx] border-[1rpx] border-[#e0e0e0] transition-all duration-300 shadow-[0_5rpx_15rpx_rgba(0,0,0,0.05)] hover:translate-y-[-5rpx] hover:shadow-[0_8rpx_20rpx_rgba(26,115,232,0.15)]">
              <View class="flex items-center mb-[20rpx]">
                <View class="w-[40rpx] h-[40rpx] bg-[#1a73e8] rounded-[10rpx] flex items-center justify-center text-white text-[18rpx] mr-[15rpx]">
                  <IconFont name="heart" />
                </View>
                <Text class="text-[20rpx] font-semibold text-[#333]">婚姻状况</Text>
              </View>
              <View class="text-[18rpx] text-[#555] leading-[1.6] pl-[55rpx]">
                <Text class="block my-[12rpx] flex items-center">
                  <IconFont name="ring" class="mr-[10rpx] text-[#1a73e8] w-[24rpx] text-center" /> 
                  {{ demographicInfo.maritalStatus }}
                </Text>
              </View>
            </View>
            
            <!-- 文化程度卡片 -->
            <View class="bg-[#f8fbff] rounded-[15rpx] p-[25rpx] border-[1rpx] border-[#e0e0e0] transition-all duration-300 shadow-[0_5rpx_15rpx_rgba(0,0,0,0.05)] hover:translate-y-[-5rpx] hover:shadow-[0_8rpx_20rpx_rgba(26,115,232,0.15)]">
              <View class="flex items-center mb-[20rpx]">
                <View class="w-[40rpx] h-[40rpx] bg-[#1a73e8] rounded-[10rpx] flex items-center justify-center text-white text-[18rpx] mr-[15rpx]">
                  <IconFont name="graduation-cap" />
                </View>
                <Text class="text-[20rpx] font-semibold text-[#333]">文化程度</Text>
              </View>
              <View class="text-[18rpx] text-[#555] leading-[1.6] pl-[55rpx]">
                <Text class="block my-[12rpx] flex items-center">
                  <IconFont name="book" class="mr-[10rpx] text-[#1a73e8] w-[24rpx] text-center" /> 
                  {{ demographicInfo.education }}
                </Text>
              </View>
            </View>
            
            <!-- 职业卡片 -->
            <View class="bg-[#f8fbff] rounded-[15rpx] p-[25rpx] border-[1rpx] border-[#e0e0e0] transition-all duration-300 shadow-[0_5rpx_15rpx_rgba(0,0,0,0.05)] hover:translate-y-[-5rpx] hover:shadow-[0_8rpx_20rpx_rgba(26,115,232,0.15)]">
              <View class="flex items-center mb-[20rpx]">
                <View class="w-[40rpx] h-[40rpx] bg-[#1a73e8] rounded-[10rpx] flex items-center justify-center text-white text-[18rpx] mr-[15rpx]">
                  <IconFont name="briefcase" />
                </View>
                <Text class="text-[20rpx] font-semibold text-[#333]">职业</Text>
              </View>
              <View class="text-[18rpx] text-[#555] leading-[1.6] pl-[55rpx]">
                <Text class="block my-[12rpx] flex items-center">
                  <IconFont name="laptop" class="mr-[10rpx] text-[#1a73e8] w-[24rpx] text-center" /> 
                  {{ demographicInfo.occupation }}
                </Text>
                <Text class="block my-[12rpx] flex items-center">
                  <IconFont name="building" class="mr-[10rpx] text-[#1a73e8] w-[24rpx] text-center" /> 
                  {{ demographicInfo.company }}
                </Text>
              </View>
            </View>
            
            <!-- 宗教信仰卡片 -->
            <View class="bg-[#f8fbff] rounded-[15rpx] p-[25rpx] border-[1rpx] border-[#e0e0e0] transition-all duration-300 shadow-[0_5rpx_15rpx_rgba(0,0,0,0.05)] hover:translate-y-[-5rpx] hover:shadow-[0_8rpx_20rpx_rgba(26,115,232,0.15)]">
              <View class="flex items-center mb-[20rpx]">
                <View class="w-[40rpx] h-[40rpx] bg-[#1a73e8] rounded-[10rpx] flex items-center justify-center text-white text-[18rpx] mr-[15rpx]">
                  <IconFont name="praying-hands" />
                </View>
                <Text class="text-[20rpx] font-semibold text-[#333]">宗教信仰</Text>
              </View>
              <View class="text-[18rpx] text-[#555] leading-[1.6] pl-[55rpx]">
                <Text class="block my-[12rpx] flex items-center">
                  <IconFont name="church" class="mr-[10rpx] text-[#1a73e8] w-[24rpx] text-center" /> 
                  {{ demographicInfo.religion }}
                </Text>
              </View>
            </View>
          </View>
        </View>
        
        <!-- 生物特征部分 -->
        <View class="mb-[40rpx]">
          <View class="flex items-center mb-[25rpx] pb-[15rpx] border-b-[2rpx] border-b-[#e0e0e0]">
            <View class="w-[50rpx] h-[50rpx] bg-gradient-to-br from-[#64b5f6] to-[#1a73e8] rounded-[12rpx] flex items-center justify-center text-white text-[24rpx] shadow-[0_4rpx_12rpx_rgba(26,115,232,0.3)] mr-[15rpx]">
              <IconFont name="dna" />
            </View>
            <Text class="text-[26rpx] font-semibold text-[#1a73e8]">生物特征</Text>
          </View>
          
          <!-- 生物特征卡片 -->
          <View class="bg-gradient-to-br from-[#e3f2fd] to-[#bbdefb] rounded-[20rpx] p-[30rpx] text-center col-span-2">
            <Text class="text-[24rpx] font-semibold text-[#0d47a1] mb-[25rpx] flex items-center justify-center">
              <IconFont name="heartbeat" class="mr-[12rpx] text-[28rpx]" /> 生理特征数据
            </Text>
            
            <View class="flex justify-around flex-wrap">
              <!-- 血型 -->
              <View class="m-[0_20rpx_20rpx] min-w-[180rpx]">
                <Text class="text-[36rpx] font-bold text-[#1a73e8] my-[10rpx]">{{ biometrics.bloodType }}</Text>
                <Text class="text-[18rpx] text-[#555]">血型</Text>
              </View>
              
              <!-- 身高 -->
              <View class="m-[0_20rpx_20rpx] min-w-[180rpx]">
                <Text class="text-[36rpx] font-bold text-[#1a73e8] my-[10rpx]">{{ biometrics.height }}</Text>
                <Text class="text-[18rpx] text-[#555]">身高</Text>
              </View>
              
              <!-- 体重 -->
              <View class="m-[0_20rpx_20rpx] min-w-[180rpx]">
                <Text class="text-[36rpx] font-bold text-[#1a73e8] my-[10rpx]">{{ biometrics.weight }}</Text>
                <Text class="text-[18rpx] text-[#555]">体重</Text>
              </View>
              
              <!-- BMI指数 -->
              <View class="m-[0_20rpx_20rpx] min-w-[180rpx]">
                <Text class="text-[36rpx] font-bold text-[#1a73e8] my-[10rpx]">{{ biometrics.bmi }}</Text>
                <Text class="text-[18rpx] text-[#555]">BMI指数</Text>
              </View>
            </View>
          </View>
        </View>
      </ScrollView>
      
      <!-- 底部按钮 -->
      <View class="bg-[#f5f9ff] p-[25rpx_40rpx] flex justify-center border-t-[1rpx] border-t-[#e0e0e0]">
        <View class="flex gap-[25rpx]">
          <!-- 编辑按钮 -->
          <Button 
            class="p-[14rpx_40rpx] rounded-[50rpx] text-[18rpx] font-semibold cursor-pointer transition-all duration-300 flex items-center shadow-[0_4rpx_15rpx_rgba(0,0,0,0.1)] bg-gradient-to-r from-[#1a73e8] to-[#0d47a1] text-white hover:translate-y-[-3rpx] hover:shadow-[0_6rpx_20rpx_rgba(0,0,0,0.15)]"
            @click="handleEdit"
          >
            <IconFont name="edit" class="mr-[10rpx]" v-if="!editLoading" />
            <IconFont name="loading" class="mr-[10rpx] animate-spin" v-else />
            {{ editLoading ? '加载中...' : '编辑信息' }}
          </Button>
          
          <!-- 打印按钮 -->
          <Button 
            class="p-[14rpx_40rpx] rounded-[50rpx] text-[18rpx] font-semibold cursor-pointer transition-all duration-300 flex items-center shadow-[0_4rpx_15rpx_rgba(0,0,0,0.1)] bg-gradient-to-r from-[#4caf50] to-[#2e7d32] text-white hover:translate-y-[-3rpx] hover:shadow-[0_6rpx_20rpx_rgba(0,0,0,0.15)]"
            @click="handlePrint"
          >
            <IconFont name="print" class="mr-[10rpx]" v-if="!printLoading" />
            <IconFont name="loading" class="mr-[10rpx] animate-spin" v-else />
            {{ printLoading ? '准备中...' : '打印报告' }}
          </Button>
        </View>
      </View>
    </View>
  </View>
</template>

<style>
/* 确保所有元素使用 border-box 模型 */
*, *::before, *::after {
  box-sizing: border-box;
}
</style>